<template>
  <page-layout class="shop-container">
    <a-button #action type="primary" icon="plus">添加</a-button>
    <a-card>
      <Search :payload="payload" />
      <a-table
        :pagination="false"
        rowKey="id"
        :dataSource="data"
        :columns="columns"
      >
        <template #status="text">
          <status-switch
            :status="text"
            @click="changeStatus(record)"
          ></status-switch>
        </template>
        <template #action="text,record">
          <div class="action-box">
            <span class="primary">修改</span>
            <span @click="remove(record)" class="danger">删除</span>
          </div>
        </template>
      </a-table>
      <my-pagination :payload="payload" :total="total" />
    </a-card>
  </page-layout>
</template>

<script>
import Search from "./Search";

const columns = [
  { title: "编号", dataIndex: "id" },
  {
    title: "启用",
    dataIndex: "status",
    scopedSlots: { customRender: "status" }
  },
  { title: "操作", scopedSlots: { customRender: "action" } }
];

export default {
  components: {
    Search
  },
  data() {
    return {
      payload: this.getPayload(),
      columns,
      data: [{ id: 1 }],
      total: 0
    };
  }
};
</script>

<style></style>
